<template>
    <div class="test-component-page">
        <template v-if="Object.keys(fieldConfig).length">
            <t class="t2">{{ fieldConfig.name || '' }}</t>
            <p>
                <span v-if="fieldConfig.des">{{ fieldConfig.des }}；</span>
                <span v-if="fieldConfig.valueType">
                    该控件<span class="s-code">v-model</span>绑定的值类型为:<span class="d-code">{{ fieldConfig.valueType }}</span>
                </span>
            </p>
        </template>
        <t class="t2" v-else>使用示例</t>
        <component v-for="(comp, key) in components" :key="key" :is="comp"></component>
        <template v-for="(data, key) in configTableDatas">
            <config-table v-if="data.length" :key="key" :title="titles[key]" :step="key" :table-data="data"></config-table>
            <div v-if="key === 'attributes'" :key="key">
                <t class="t2" id="format & valueFormat">
                    <span class="s-code">format</span>与<span class="s-code">valueFormat</span>支持的格式化规则如下表
                </t>
                <sib-table
                    size="small"
                    stripe
                    :index-config="formatIndexConfig"
                    :show-pagination="false"
                    :table-column="formatColumn"
                    :table-data="formatData">
                </sib-table>
            </div>
        </template>

        <el-backtop target=".main-container"></el-backtop>
    </div>
</template>

<script>
import {
    onMounted, computed, watch, nextTick,
} from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import fieldTypes from '../../utils/field-types-desc';

export default {
    setup() {
        const route = useRoute();
        const store = useStore();
        const components = computed(() => {
            const comps = {};
            Array(20).fill().forEach((_, i) => {
                const example = `example${i + 1}`;
                let comp;
                // eslint-disable-next-line
                try { comp = require(`./${example}`).default; } catch (error) {}
                if (comp) comps[example] = comp;
            });
            return comps;
        });
        const configTableDatas = computed(() => {
            let datas = {};
            // eslint-disable-next-line
            try { datas = require(`./attributes`).default; } catch (error) {}
            return datas;
        });
        const fieldConfig = computed(() => fieldTypes.find(({ path, code }) => (path || `/${code}`) === route.path) || {});
        const titles = computed(() => {
            const compName = (route.path || '').slice(1).split('-').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join('');
            return {
                attributes: `${compName} 属性`,
                events: `${compName} 事件`,
                slots: `${compName} 插槽`,
                refs: `${compName} 方法`,
            };
        });

        watch(route, () => {
            nextTick(() => { store.commit('updateArticleTree'); });
        });
        onMounted(() => { store.commit('updateArticleTree'); });

        return {
            components,
            fieldConfig,
            configTableDatas,
            titles,
            formatIndexConfig: { type: 'hidden' },
            formatColumn: [
                {
                    label: 'Format',
                    code: 'format',
                    width: 150,
                },
                {
                    label: 'Output',
                    code: 'output',
                    width: 250,
                },
                {
                    label: 'Description',
                    code: 'description',
                },
            ],
            formatData: [
                {
                    format: 'YY',
                    output: '23',
                    description: '两位数年份',
                },
                {
                    format: 'YYYY',
                    output: '2023',
                    description: '四位数年份',
                },
                {
                    format: 'M',
                    output: '1-12',
                    description: '不补0',
                },
                {
                    format: 'MM',
                    output: '01-12',
                    description: '补0',
                },
                {
                    format: 'MMM',
                    output: 'Jan-Dec',
                    description: '缩写的月份名称',
                },
                {
                    format: 'MMMM',
                    output: 'January-December',
                    description: '完整的月份名称',
                },
                {
                    format: 'D',
                    output: '1-31',
                    description: '不补0',
                },
                {
                    format: 'DD',
                    output: '01-31',
                    description: '补0',
                },
                {
                    format: 'd',
                    output: '0-6',
                    description: '周日至周六对应的数值',
                },
                {
                    format: 'dd',
                    output: 'Su-Sa',
                    description: '周一至周日的最简英文名称',
                },
                {
                    format: 'ddd',
                    output: 'Sun-Sat',
                    description: '缩写的周一至周日的英文名称',
                },
                {
                    format: 'dddd',
                    output: 'Sunday-Saturday',
                    description: '完整的周一至周日的英文名称',
                },
                {
                    format: 'H',
                    output: '0-23',
                    description: '不补0',
                },
                {
                    format: 'HH',
                    output: '00-23',
                    description: '补0',
                },
                {
                    format: 'h',
                    output: '1-12',
                    description: '不补0',
                },
                {
                    format: 'hh',
                    output: '01-12',
                    description: '补0',
                },
                {
                    format: 'm',
                    output: '0-59',
                    description: '不补0',
                },
                {
                    format: 'mm',
                    output: '00-59',
                    description: '补0',
                },
                {
                    format: 's',
                    output: '00-59',
                    description: '补0',
                },
                {
                    format: 'ss',
                    output: '00-59',
                    description: '补0',
                },
                {
                    format: 'SSS',
                    output: '000-999',
                    description: '毫秒',
                },
                {
                    format: 'Z',
                    output: '+05:00',
                    description: '与UTC的偏移量，±HH:mm',
                },
                {
                    format: 'ZZ',
                    output: '+0500',
                    description: '与UTC的偏移量，±HHmm',
                },
                {
                    format: 'A',
                    output: 'AM/PM',
                    description: '-',
                },
                {
                    format: 'a',
                    output: 'am/pm',
                    description: '-',
                },
                {
                    format: 'Q',
                    output: '1-4',
                    description: '季度',
                },
                {
                    format: 'Do',
                    output: '1st 2nd ... 31st',
                    description: '月份的第几天（带序号）',
                },
                {
                    format: 'k',
                    output: '1-24',
                    description: '当日的第几个小时',
                },
                {
                    format: 'kk',
                    output: '01-24',
                    description: '当日的第几个小时，补0',
                },
                {
                    format: 'X',
                    output: '1360013296',
                    description: '时间戳(秒)',
                },
                {
                    format: 'x',
                    output: '1360013296123',
                    description: '时间戳(毫秒)',
                },
                {
                    format: 'w',
                    output: '1 2 ... 52 53',
                    description: '当年的第几周',
                },
                {
                    format: 'ww',
                    output: '01 02 ... 52 53',
                    description: '当年的第几周，补0',
                },
                {
                    format: 'date',
                    output: 'Tue Aug 29 2023 12:02:55 GMT+0800 (中国标准时间)',
                    description: 'Date 格式日期',
                },
                {
                    format: '[MM]',
                    output: '不需要格式化字符',
                    description: '使用方括号标识不需要格式化的字符 (如 [abc])',
                },
            ],
        };
    },
};
</script>
